<template>
  <div class="app-container business-page">
    <div class="search-from">
      <el-form
        v-show="showSearch"
        id="searchFrom"
        :inline="true"
        :model="searchFrom"
        class="demo-form-inline"
      >
        <!--        <el-form-item>-->
        <!--          <el-date-picker-->
        <!--            v-model="searchFrom.telDate"-->
        <!--            clearable-->
        <!--            placeholder="请选择来电时间"-->
        <!--            style="width: 100%"-->
        <!--            type="date"-->
        <!--            value-format="YYYY-MM-DD"-->
        <!--          />-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-date-picker
            v-model="telDateARR"
            end-placeholder="请选择来电结束时间"
            range-separator="-"
            start-placeholder="请选择来电开始时间"
            style="width: 100%"
            type="daterange"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.telPerson"
            clearable
            maxlength="15"
            placeholder="请输入来电人"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.personTel"
            clearable
            maxlength="20"
            placeholder="请输入来电号码"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchFrom.type"
            clearable
            placeholder="请选择来电类型"
          >
            <el-option
              v-for="(dict, index) in biz_call_record_type"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.customerName"
            clearable
            maxlength="50"
            placeholder="请输入客户名称"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.customerTaxcode"
            clearable
            maxlength="50"
            placeholder="请输入税号"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.userName"
            clearable
            maxlength="15"
            placeholder="请输入受理人"
          />
        </el-form-item>
        <el-form-item>
          <el-cascader
            ref="questionType"
            v-model="questionTypeIdSelect"
            :options="questionTypeOptions"
            :props="questionTypeProps"
            filterable
            placeholder="请选择问题分类"
            style="width: 300px"
            @change="questionTypePropsChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchFrom.isDispatch"
            clearable
            placeholder="请选择是否派单"
          >
            <el-option
              v-for="item in isDispatchOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchFrom.isNuoYan"
            clearable
            placeholder="请选择是否诺言"
          >
            <el-option
              v-for="item in isNuoYanOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.dispatchContact"
            clearable
            maxlength="15"
            placeholder="请输入派单联系人"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.dispatchPhone"
            clearable
            maxlength="20"
            placeholder="请输入派单联系电话"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" type="primary" @click="handleQuery"
            >查询</el-button
          >
          <el-button icon="Refresh" type="default" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-row>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList">
          <el-tooltip
            :content="'自定义列表'"
            class="item"
            effect="dark"
            placement="top"
          >
            <el-button circle icon="Menu" @click="handleTable()" />
          </el-tooltip>
        </right-toolbar>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      @row-dblclick="handleClickProject"
    >
      <el-table-column
        v-for="(item, index) in tableCol.filter(item => item.show)"
        :key="index"
        v-bind="item"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="190">
        <template #default="scoped">
          <el-button
            icon="Edit"
            plain
            size="small"
            type="primary"
            @click="handleFn(scoped.row, 'edit')"
          >
            修改</el-button
          >
          <el-button
            icon="DeleteFilled"
            plain
            size="small"
            type="danger"
            @click="handleFn(scoped.row, 'del')"
          >
            删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:limit="searchFrom.pageSize"
      v-model:page="searchFrom.pageNum"
      :total="total"
      @pagination="getList"
    />
    <!-- 自定义订单列表弹窗 -->
    <DiaFixTable
      v-model="diaTable.open"
      :dialogParam="diaTable"
      @ok="diaTableFn"
    />
  </div>
</template>

<script name="WorkOrderList" setup>
import { reactive, getCurrentInstance, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { WORKORDERLISTTABLE } from '@/hooks/dict/workOrderList.js'
import * as API from '@/api/callCenter'
import useCommonStore from '@/store/modules/common'
import useUserStore from '@/store/modules/user'
import { delProRemoveById } from '@/api/projectManage/project'
import { deleteCallList } from '@/api/callCenter'
const commonStore = useCommonStore()
const { proxy } = getCurrentInstance()
import { ElLoading } from 'element-plus'
import { format } from 'date-fns'
const { biz_call_record_type } = proxy.useDict('biz_call_record_type')
// 通用数据store
const router = useRouter()
const route = useRoute()
const data = reactive({
  loading: false,
  searchFrom: {
    // telDate: new Date(),
    type: null,
    customerName: null,
    customerTaxcode: null,
    dispatchContact: null,
    dispatchPhone: null,
    isDispatch: null,
    personTel: null, //
    questionType: null, //
    telPerson: null,
    userName: null,
    pageSize: 10,
    pageNum: 1,
    isNuoYan: null //是否是诺言
  },
  total: 0,
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  tableData: [],
  selectionList: [],
  //是否派单
  isDispatchOption: [
    {
      label: '是',
      value: '1'
    },
    {
      label: '否',
      value: '0'
    }
  ],
  //是否派单
  isNuoYanOption: [
    {
      label: '是',
      value: '1'
    },
    {
      label: '否',
      value: '0'
    }
  ]
})
const {
  loading,
  searchFrom,
  tableData,
  selectionList,
  single,
  multiple,
  total,
  isDispatchOption,
  isNuoYanOption
} = toRefs(data)
const deptIdOption = ref([])
/***来电时间*/
const telDateARR = ref([])
/** 搜索按钮操作 */
function handleQuery() {
  searchFrom.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  searchFrom.value = {
    pageNum: 1,
    pageSize: 10
  }
  telDateARR.value = []
  questionTypeIdSelect.value = []
  getList()
}

//表格选择
function handleSelectionChange(selection) {
  selectionList.value = selection
  console.log('selectionList', selectionList)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
// 客户名称点击
const handleClickProject = row => {
  router.push({
    path: '/callCenter/telephoneRecords/phoneRecordSheet',
    // params: {
    //   id: row.id,
    //   type: 'detail'
    // }
    query: { id: row.id, type: 'detail' }
  })
}
/**
 * 获取列表
 */
async function getList() {
  console.log(telDateARR.value, '333')
  loading.value = true
  let param = { ...searchFrom.value }
  param.telDateStart =
    telDateARR.value && telDateARR.value.length > 0 ? telDateARR.value[0] : ''
  param.telDateEnd =
    telDateARR.value && telDateARR.value.length > 0 ? telDateARR.value[1] : ''
  API.callList(param).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}
/**** 自定义table 列表配置  */
const showSearch = ref(true)
let tableCol = ref(WORKORDERLISTTABLE)
/* ***
* 参数说明
* open: 打开自定义列表弹窗 true/false
tableName: 列表名称唯一值，用于保存列表配置和获取列表配置
tableCol: 列表列数据
initCol: 初始列表数据用于客户重置为本地的列表数据
*/
// 2. 设置传递的参数变量
const diaTable = ref({
  open: false,
  tableName: 'workOrderListTable',
  tableCol: tableCol.value,
  initCol: WORKORDERLISTTABLE
})

// 获取列表配置
const diaTableFn = value => {
  tableCol.value = value
}
// 自定义列表
const handleTable = () => {
  diaTable.value = {
    open: true,
    tableName: 'workOrderListTable', //唯一值防止与其他列表混合
    tableCol: tableCol.value,
    initCol: WORKORDERLISTTABLE
  }
}
// 初始化
async function init() {
  telDateARR.value = [
    format(new Date(), 'yyyy-MM-dd'),
    format(new Date(), 'yyyy-MM-dd')
  ]
  getquestionType()
  // 初始化列表配置
  if (useUserStore().userInfo.listDisaplayObj?.workOrderListTable) {
    let _tableCol = JSON.parse(
      useUserStore().userInfo.listDisaplayObj['workOrderListTable']
    )
    // 过滤出本地新增的列
    let initItmes = WORKORDERLISTTABLE.filter(
      item =>
        !_tableCol.some(item1 => {
          return item1.prop == item.prop
        })
    )
    tableCol.value = []
    _tableCol.forEach(item => {
      let newItem = {}
      for (const e of WORKORDERLISTTABLE) {
        if (e.prop == item.prop) {
          newItem = { ...e, ...item, label: e.label }
          tableCol.value.push(newItem)
          break
        }
      }
    })
    tableCol.value = [...tableCol.value, ...initItmes]
  }
  // 归属部门
  getList()
}
/*******************table 操作**************/
const handleFn = (row, type) => {
  console.log(row, type, 'row,type--')
  let fullscreenLoading = ''
  if (type == 'edit') {
    //修改
    router.push({
      path: '/callCenter/telephoneRecords/phoneRecordSheet',
      query: { id: row.id, type: 'edit' }
    })
  } else {
    proxy.$modal
      .confirm('是否确认删除该的数据项?')
      .then(function () {
        fullscreenLoading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        return deleteCallList(row.id)
      })
      .then(() => {
        getList()
        fullscreenLoading.close()
        proxy.$modal.msgSuccess('删除成功')
      })
      .catch(() => {
        fullscreenLoading.close()
      })
  }
}
/**************************************问题分类*/
const questionTypeIdSelect = ref([])
const questionTypeOptions = ref([])
const questionTypeProps = ref({
  value: 'questionTypeId,',
  label: 'questionTypeName'
})
//请求接口的时候
const getquestionType = () => {
  if (sessionStorage.getItem('questionTypeOptions')) {
    questionTypeOptions.value = JSON.parse(
      sessionStorage.getItem('questionTypeOptions')
    )
    return false
  }
  API.questionTyplist().then(res => {
    questionTypeOptions.value = res.data
    let dats = JSON.stringify(res.data)
    sessionStorage.setItem('questionTypeOptions', dats)
  })
}
// 问题分类 选中的时候
const questionTypePropsChange = (value, selectedData) => {
  console.log(value, selectedData, '选好')
  if (value) {
    let selectVal = proxy.$refs['questionType'].getCheckedNodes()
    searchFrom.value.questionTypeId = selectVal
      ? selectVal[0].data.questionTypeId
      : ''
    searchFrom.value.questionTypeName = selectVal
      ? selectVal[0].data.questionTypeName
      : ''
  } else {
    searchFrom.value.questionTypeId = ''
    searchFrom.value.questionTypeName = ''
  }
}
init()
</script>

<style lang="scss" scoped>
.business-page {
  display: block;
  .search-from {
    @apply pb-30px;
  }
  #searchFrom {
    :deep .el-input__wrapper {
      // width: 200px;
      @apply w-200px;
    }
    :deep .el-form-item {
      margin-right: 10px;
    }
  }
}
</style>
